<template>
  <div class="l-rblock l-desktop">
    <div v-show="steps(0)" class="l-rblock" style="padding: 24px">
      <div class="l-page-panel">
        <el-form :model="formData" :rules="rules" size="mini" ref="baseInfo" label-width="80px">
          <el-col :span="24">
            <el-form-item label="编号" prop="f_Code">
              <el-input v-model="formData.f_Code">
                <el-button slot="append" @click="createUUID">生成UUID</el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="名称" prop="f_Name">
              <el-input v-model="formData.f_Name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="图标" prop="f_Icon">
              <l-input-icon :iconList="lr_icons" v-model="formData.f_Icon"> </l-input-icon>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="上级" prop="f_PModuleId">
              <l-tree-select v-model="formData.f_PModuleId" :options="modulesExpandTree"> </l-tree-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="排序" prop="f_SortCode">
              <el-input-number v-model="formData.f_SortCode" controls-position="right" :min="1"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="菜单" prop="f_IsMenu">
              <el-switch :active-value="1" :inactive-value="0" v-model="formData.f_IsMenu"> </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="首屏" prop="f_IsFirst">
              <el-switch :active-value="1" :inactive-value="0" v-model="formData.f_IsFirst"> </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="状态" prop="f_EnabledMark">
              <el-switch :active-value="1" :inactive-value="0" v-model="formData.f_EnabledMark"> </el-switch>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="描述" prop="f_Description">
              <el-input type="textarea" :rows="4" v-model="formData.f_Description"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </div>
    </div>
    <div v-show="steps(1)" class="l-rblock">
      <l-quick-bi-design
        :isShow="steps(1)"
        ref="quickBiDesign"
        :componentList="componentList"
        :noDataConfigComponents="noDataConfigComponents"
      ></l-quick-bi-design>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { v4 as uuidv4 } from "uuid";
import componentList from "./components";
import "./components/base";
import "./components/view";

export default {
  props: {
    stepActive: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      componentList,
      noDataConfigComponents: ["datalist", "mytask", "mytasklist", "modules"],
      formData: {
        f_Type: 1,
        f_Code: "",
        f_Name: "",
        f_Icon: "learun-icon-computer",
        f_PModuleId: "",
        f_ModuleId: "",
        f_SortCode: "",
        f_IsMenu: 0,
        f_EnabledMark: 1,
        f_IsFirst: 1,
        f_Description: "",
      },
      rules: {
        f_Code: [
          { required: true, message: "请输入编号", trigger: "blur" },
          {
            validator: this.lr_existDbFiled,
            keyValue: () => {
              return this.formData.f_ModuleId;
            },
            tableName: "lr_base_module",
            fieldName: "f_EnCode",
            keyName: "f_ModuleId",
            trigger: "null",
          },
        ],
        f_Name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        f_Icon: [{ required: true, message: "请选择图标", trigger: "blur" }],
      },
      layout: [],
    };
  },
  computed: {
    ...mapGetters(["modulesExpandTree"]),
  },
  created() {
    this.lr_loadDataSourceList && this.lr_loadDataSourceList();
  },
  mounted() {},
  methods: {
    createUUID() {
      this.formData.f_Code = uuidv4();
    },
    resetForm() {
      this.formData.f_Id = "";
      this.formData.f_ModuleId = "";
      this.$refs.baseInfo && this.$refs.baseInfo.resetFields();
      this.$refs.quickBiDesign && this.$refs.quickBiDesign.set([]);
    },
    getForm() {
      const postData = {
        lr_desktop_infoEntity: this.$deepClone(this.formData),
        lr_desktop_schemeEntity: {
          f_Content: JSON.stringify(this.$refs.quickBiDesign.get()),
        },
      };
      postData.moduleEntity = {
        f_EnCode: postData.lr_desktop_infoEntity.f_Code,
        f_FullName: postData.lr_desktop_infoEntity.f_Name,
        f_ParentId: postData.lr_desktop_infoEntity.f_PModuleId,
        f_Icon: postData.lr_desktop_infoEntity.f_Icon,
        f_Target: `desktop${postData.lr_desktop_infoEntity.f_IsFirst}`, // 桌面设计
        f_IsMenu: postData.lr_desktop_infoEntity.f_IsMenu,
        f_DeleteMark: 0,
        f_UrlAddress: `${postData.lr_desktop_infoEntity.f_Code}`,
        f_EnabledMark: postData.lr_desktop_infoEntity.f_EnabledMark,
        f_SortCode: postData.lr_desktop_infoEntity.f_SortCode,
        f_Description: postData.lr_desktop_infoEntity.f_Description,
      };

      return new Promise((resolve) => {
        window
          .html2canvas(this.$refs.quickBiDesign.$children[0].$children[2].$el.children[0].children[1], {
            useCORS: true,
            backgroundColor: null,
            allowTaint: true,
          })
          .then((canvas) => {
            postData.lr_desktop_infoEntity.img = canvas.toDataURL("image/jpeg");
            resolve(postData);
          });
      });
    },
    setForm(data) {
      this.formData = data.lr_desktop_infoEntity;
      this.$refs.quickBiDesign.set(JSON.parse(data.lr_desktop_schemeEntity.f_Content));
    },

    steps(num) {
      return this.stepActive == num;
    },
    validateBaseInfo() {
      return new Promise((resolve) => {
        this.$refs.baseInfo.validate((valid) => {
          if (valid) {
            resolve(true);
          } else {
            resolve(false);
          }
        });
      });
    },
    validateSteps() {
      return new Promise((resolve) => {
        if (this.stepActive == 0) {
          // 判断基础信息是否填写完整
          this.validateBaseInfo().then((res) => {
            resolve(res);
          });
        } else {
          resolve(true);
        }
      });
    },
  },
};
</script>
